<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>地图加载+标记+提示框</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqsn1M2pSssz9OrldUVHP4ELTDToelVYw" defer></script>
	<script>
		let lattxt = 38.9145442;  // 经度
		let lngtxt = 121.6140788; // 维度
		let uluru = {lat:lattxt, lng:lngtxt};
		let address = '大连市';
		
		function initMap() {
			var map = new google.maps.Map(document.getElementById("map"), {
				center: uluru,
				zoom: 12 // 数字越大，高度越低
			});

			// 定点
			var marker = new google.maps.Marker({
				position: uluru,
				map: map,
				animation: google.maps.Animation.DROP,  // 图标动态效果掉落
				// label: '喔' // 图标上的文字
				// icon: 'http://www.oxxostudio.tw/img/articles/201801/google-maps-3-marker-icon.png', // 可以换其他的图标 or 图片
				// draggable: true // 可拖拽
			});

			// 咨询窗
			var infowindow = new google.maps.InfoWindow({
				content: address,
			    position: uluru,
			    size: new google.maps.Size(50, 50)
			});
			infowindow.open(map, marker);  // 调用
		};

		window.onload = function(){
    		initMap();
		}
	</script>
</body>
</html>